import React, {useState} from 'react';
import './index.css';

import {Layout, Menu, Dropdown, Space, Avatar} from 'antd';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UserOutlined,
} from '@ant-design/icons';

const {Header} = Layout;
const {Item} = Menu;

/**
 * 头部导航栏
 */
function TopNavigation() {
  const [collapsed, setCollapsed] = useState(false);

  const menu = (
    <Menu>
      <Item key='1'>超级管理员</Item>
      <Item key='2' danger>退出登录</Item>
    </Menu>
  );

  /**
   * 控制 折叠or收起 侧边栏图标
   */
  const changeCollapsed = ()=>{
    setCollapsed(!collapsed);
  }

  return (
    <Header className="site-layout-background" style={{paddingLeft: 16}}>
      {collapsed ? <MenuUnfoldOutlined onClick={changeCollapsed}/> : <MenuFoldOutlined onClick={changeCollapsed}/>}
      <div style={{float: 'right'}}>
        <span style={{marginRight: 10}}>欢迎 <span style={{color: '#1890ff'}}>admin</span> 回来</span>
        <Dropdown overlay={menu}>
          <Space>
            <Avatar icon={<UserOutlined/>}/>
          </Space>
        </Dropdown>
      </div>
    </Header>
  );
}

export default TopNavigation;